<template>
  <div
    :class="[
      uni_type,
      css_content_padding,
      css_wind_light_hover,
      css_cursor_pointer,
      css_active_item,
    ]"
    :id="cur_uni_type_props.cur_uni_type_id"
    :active="cur_uni_type_props.active"
  >
    {{ cur_uni_type_props.val }}
  </div>
</template>

<script setup lang="ts">
import { onMounted, toRaw } from 'vue';

import './uni_type.css';
import { init_uni_type } from './uni_type';
import {
  css_active_item,
  css_content_padding,
  css_cursor_pointer,
  css_wind_light_hover,
} from '../../../../../global_comps/Css';
import { uni_type } from './DataDefine/sourceData';

let cur_uni_type_props = defineProps({
  /**
   * id 值
   */
  id: { required: true, type: String },

  /**
   * cur_uni_type_id 当前 元素 的 id
   */
  cur_uni_type_id: { required: true, type: String },

  /**
   * innerHTML 内容值
   */
  val: { required: true, type: String },

  /**
   * 应用状态
   */
  active: { type: Boolean },
});

onMounted(() => {
  init_uni_type(toRaw(cur_uni_type_props));
});
</script>
